<template>
	<view class="count">
		<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
			<view class="top">
				<input type="text" class="inp" placeholder="搜索猫猫品种" v-model="breed" @confirm="comfigFn" name="" id="">
				<image src="/static/sech.png" class="sech" mode=""></image>
			</view>
			<view class="list">
				<view v-for="(item,index) in list" @click="setelPin(item,index)" :key="index" class="item f f-a-c">
					<image :src="item.avatar" class="avatr" mode=""></image>
					<view class="name">
						{{item.name}}
					</view>
				</view>
				<view v-if="list.length==0" class="zanwu">
					暂无宠物
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				breed: '',
				defaultTime: '请选择',
				list: []
			}
		},
		onShow(){
			this.initList()
		},
		methods: {
			// 这个是回车
			comfigFn(){
				// console.log('123456789');
				this.list=[]
				this.initList()
			},
			async initList(){
				let n=await this.$api.breedsList({
					q:this.breed
				})
				this.list=n.data
			},
			onreachBottom() {
				console.log('456789');
			},
			setelPin(item, index) {
				//这个是自己选择
				uni.setStorageSync('cat', item)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zanwu{
		text-align: center;
		margin-top: 50%;
		font-size: 34rpx;
		color: #666;
		font-weight: 700;
	}
	.list {
		width: 90%;
		margin: 0 auto;

		.item {
			margin-top: 30rpx;

			.avatr {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				margin-right: 20rpx;
			}

			.name {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
			}
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		background: #fffefc;
		padding-top: 40rpx;
		padding-bottom: 50rpx;
		overflow-y: auto;
	}

	.top {
		position: relative;
		width: 90%;
		border-radius: 40rpx;
		height: 72rpx;
		margin: 0 auto;

		.sech {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			left: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		.inp {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			border-radius: 40rpx;
			background: #f7f6f2;
			padding-left: 70rpx;
		}


	}
</style>